<template>
  <div>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      :maskClosable="false"
      :title="title"
      :width="drawerWidth"
      @cancel="handleClose"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="onSubmit"
      footer=""
    >
      <template>
        <div class="modalBut">
          <a-button @click="handleClose">
            取消
          </a-button>
          <a-button @click="onSubmit" type="primary">确认</a-button>
        </div>
      </template>
      <div
        :style="{
          width: '100%',
          border: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
        }"
      >
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="ruleForm" :model="model" :rules="rules">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="订单号"
              hasFeedback
              prop="orderNumber"
            >
              <a-input
                placeholder="请输入订单号"
                v-model.trim="model.orderNumber"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="客户"
              hasFeedback
              prop="customer"
            >
              <a-input placeholder="请输入客户" v-model.trim="model.customer" />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="销售仓库"
              hasFeedback
              prop="wareHouse"
            >
              <a-input
                placeholder="请输入销售仓库"
                v-model.trim="model.wareHouse"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="客户单号"
              hasFeedback
              prop="customerOrderCode"
            >
              <a-input
                placeholder="请输入客户单号"
                v-model.trim="model.customerOrderCode"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="备注"
              hasFeedback
              prop="remarks"
            >
              <a-input placeholder="请输入备注" v-model.trim="model.remarks" />
            </a-form-model-item>

            <a-form-model-item
              label="订单日期"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              placeholder="请选择订单日期"
              prop="orderDate"
            >
              <a-date-picker
                v-model.trim="model.orderDate"
                @change="changeOrderDate"
                show-time
                type="date"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="单价销售"
              hasFeedback
              prop="unitPriceLevel"
            >
              <a-input
                placeholder="请输入单价销售"
                v-model.trim="model.unitPriceLevel"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="送货地址"
              hasFeedback
              prop="address"
            >
              <a-input
                placeholder="请输入送货地址"
                v-model.trim="model.address"
              />
            </a-form-model-item>

            <a-form-model-item
              label="计划送货日期"
              prop="plannedDeliveryDate"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker
                :showToday="false"
                placeholder="请选择计划送货日期"
                v-model.trim="model.plannedDeliveryDate"
                show-time
                type="date"
                @change="changepPannedDeliveryDate"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="销售员"
              hasFeedback
              prop="salesPerson"
            >
              <a-input
                placeholder="请输入销售员"
                v-model.trim="model.salesPerson"
              />
            </a-form-model-item>

            <a-form-model-item
              label="计划收款日期"
              prop="plannedCollectionDate"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker
                :showToday="false"
                placeholder="请选择计划收款日期"
                v-model.trim="model.plannedCollectionDate"
                show-time
                type="date"
                @change="changePlannedCollectionDate"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="发票号"
              hasFeedback
              prop="invoiceNo"
            >
              <a-input
                placeholder="请输入发票号"
                v-model.trim="model.invoiceNo"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="收款账号"
              hasFeedback
              prop="collectionAccount"
            >
              <a-input
                placeholder="请输入收款账号"
                v-model.trim="model.collectionAccount"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="总金额"
              hasFeedback
              prop="totalAmount"
            >
              <a-input
                placeholder="请输入总金额"
                v-model.trim="model.totalAmount"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="收款金额"
              hasFeedback
              prop="amountCollected"
            >
              <a-input
                placeholder="请输入收款金额"
                v-model.trim="model.amountCollected"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="结算币种"
              hasFeedback
              prop="settlementCurrency"
            >
              <a-input
                placeholder="请输入结算币种"
                v-model.trim="model.settlementCurrency"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="本币金额"
              hasFeedback
              prop="homeCurrency"
            >
              <a-input
                placeholder="请输入本币金额"
                v-model.trim="model.homeCurrency"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="汇率"
              hasFeedback
              prop="exchangeRate"
            >
              <a-input
                placeholder="请输入汇率"
                v-model.trim="model.exchangeRate"
              />
            </a-form-model-item>
          </a-form-model>
        </a-spin>
      </div>
    </a-modal>
  </div>
</template>

<script>
import api from "@/api/apiServer";
const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          { title: "0-0-0-0", key: "0-0-0-0" },
          { title: "0-0-0-1", key: "0-0-0-1" },
          { title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];
export default {
  data() {
    return {
      title: "", // 标题
      visible: false, // 状态、
      drawerWidth: 1677, // 抽屉宽度
      model: {},
      show: true, //根据菜单类型，动态显示隐藏表单元素
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validateStatus: "",
      treeData,
      expandedKeys: ["0-0-0", "0-0-1"],
      autoExpandParent: true,
      checkedKeys: ["0-0-0"],
      selectedKeys: [],
      keyId: "",
      // dateFormat:'YYYY-MM-DD HH:mm:ss'
    };
  },
  computed: {
    rules() {
      return {
        orderNumber: [{ required: true, message: "请输入订单号!" }],
        customer: [{ required: true, message: "请输入客户!" }],
        wareHouse: [{ required: true, message: "请输入销售仓库!" }],
        customerOrderCode: [{ required: true, message: "请输入客户单号!" }],
        remarks: [{ required: true, message: "请输入备注!" }],
        orderDate: [{ required: true, message: "请输入订单日期!" }],
        unitPriceLevel: [{ required: true, message: "请输入单价级别!" }],
        address: [{ required: true, message: "请输入送货地址!" }],
        plannedDeliveryDate: [
          { required: true, message: "请输入计划送货日期!" },
        ],
        salesPerson: [{ required: true, message: "请输入销售员!" }],
        plannedCollectionDate: [
          { required: true, message: "请输入计划收款日期!" },
        ],
        invoiceNo: [{ required: true, message: "请输入发票号!" }],
        collectionAccount: [{ required: true, message: "请输入收款账号!" }],
        totalAmount: [{ required: true, message: "请输入总金额!" }],
        amountCollected: [{ required: true, message: "请输入收款金额!" }],
        settlementCurrency: [{ required: true, message: "请输入结算币种!" }],
        homeCurrency: [{ required: true, message: "请输入本币金额!" }],
        exchangeRate: [{ required: true, message: "请输入汇率 !" }],
      };
    },
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    },
  },
  methods: {
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    },
    // 新增
    modalAdd() {
      this.modalEdit({});
    },
    // 编辑
    modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      this.model = Object.assign({}, record);
    },

    onChangeMenuType() {},
    // 关闭
    handleClose() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },

    onSubmit() {
      const that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.handleSubmit();
        } else {
          return false;
        }
      });
    },

    // 时间格式化
    changeOrderDate(date, dateString) {
      this.model.orderDate = dateString;
    },
    changepPannedDeliveryDate(date, dateString) {
      this.model.plannedDeliveryDate = dateString;
    },
    changePlannedCollectionDate(date, dateString) {
      this.model.plannedCollectionDate = dateString;
    },

    async handleSubmit() {
      let res;
      this.confirmLoading = true;
      this.model.directCollection = true;
      this.model.directDelivery = true;
      if (this.model.id) {
        res = await api.orderEdit(this.model); //修改
      } else {
        res = await api.orderAdd(this.model); //新增
      }
      if (res.code && res.code !== 200) {
        this.$message.error(res.message);
        this.confirmLoading = false;
        return;
      }
      this.$message.success(res.message);
      this.confirmLoading = false;
      this.$emit("ok");
      this.visible = false;
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
  },
};
</script>

<style></style>
